import React, { Component } from 'react'
import { getSwipers, getGroups, getNews, getCity } from '../../api/home'
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile'
// 导入导航菜单图片
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'
// 导入
import { BASE_URL } from '../../utils/url'
import './index.scss'
// 导入搜索导航栏组件
import SearchHeader from '../../components/SearchHeader'
// 导航菜单数据
const navs = [
  {
    id: 1,
    img: Nav1,
    title: '整租',
    path: '/home/list',
  },
  {
    id: 2,
    img: Nav2,
    title: '合租',
    path: '/home/list',
  },
  {
    id: 3,
    img: Nav3,
    title: '地图找房',
    path: '/map',
  },
  {
    id: 4,
    img: Nav4,
    title: '去出租',
    path: '/rent/add',
  },
]
export default class index extends Component {
  state = {
    // 轮播图状态数据
    swipers: [],
    isSwiperLoaded: false,
    // 租房小组数据
    groups: [],
    // 最新资讯
    news: [],
    // 当前城市名称
    curCityName: '深圳',
  }
  componentDidMount() {
    this.getSwipers()
    this.getGroups()
    this.getNews()
    // 获取地理位置信息
    //  const curCity = new window.BMap.LocalCity()
    // alert(window.BMapGL.LocalCity())
    const myFun = async (result) => {
      var cityName = result.name
      // map.setCenter(cityName);
      let res = await getCity({
        name: cityName,
      })
      console.log('res', res)
      this.setState({
        curCityName: res.body.label,
      })
    }
    // eslint-disable-next-line no-undef
    var myCity = new BMapGL.LocalCity()
    myCity.get(myFun)

    // curCity.get(async res => {
    //   // console.log('当前城市信息：', res)
    //   // const result = await axios.get(
    //   //   `http://localhost:8080/area/info?name=${res.name}`
    //   // )
    //   console.log(res)
   
    // })
  }
  async getSwipers() {
    const res = await getSwipers()
    this.setState({
      swipers: res.body,
      isSwiperLoaded: true,
    })
  }
  // 获取租房小组数据的方法
  async getGroups() {
    const res = await getGroups({ area: 'AREA%7C88cff55c-aaa4-e2e0' })
    this.setState({
      groups: res.body,
    })
  }
  // 获取最新资讯
  async getNews() {
    const res = await getNews({
      area: 'AREA%7C88cff55c-aaa4-e2e0',
    })

    this.setState({
      news: res.body,
    })
  }

  // 渲染轮播图结构
  renderSwipers() {
    return this.state.swipers.map((item) => (
      <a
        key={item.id}
        href="http://itcast.cn"
        style={{
          display: 'inline-block',
          width: '100%',
          height: 212,
        }}
      >
        <img
          src={BASE_URL + item.imgSrc}
          alt=""
          style={{ width: '100%', verticalAlign: 'top' }}
        />
      </a>
    ))
  }
  // 渲染导航菜单
  renderNavs() {
    return navs.map((item) => (
      <Flex.Item
        key={item.id}
        onClick={() => this.props.history.push(item.path)}
      >
        <img src={item.img} alt="" />
        <h2>{item.title}</h2>
      </Flex.Item>
    ))
  }
  // 渲染最新资讯
  renderNews() {
    return this.state.news.map((item) => (
      <div className="news-item" key={item.id}>
        <div className="imgwrap">
          <img className="img" src={`${BASE_URL}${item.imgSrc}`} alt="" />
        </div>
        <Flex className="content" direction="column" justify="between">
          <h3 className="title">{item.title}</h3>
          <Flex className="info" justify="between">
            <span>{item.from}</span>
            <span>{item.date}</span>
          </Flex>
        </Flex>
      </div>
    ))
  }

  render() {
    return (
      <div>
        {/* 判断是不是空值导致轮播图bug */}
        {this.state.isSwiperLoaded ? (
          <Carousel autoplay infinite autoplayInterval={5000}>
            {this.renderSwipers()}
          </Carousel>
        ) : (
          ''
        )}
        {/* 搜索框 */}
        <SearchHeader cityName={this.state.curCityName} />
        {/* 导航菜单 */}
        <Flex className="nav">{this.renderNavs()}</Flex>
        {/* 租房小组 */}
        <div className="group">
          <h3 className="group-title">
            租房小组 <span className="more">更多</span>
          </h3>

          {/* 宫格组件 */}
          <Grid
            data={this.state.groups}
            columnNum={2}
            square={false}
            hasLine={false}
            renderItem={(item) => (
              <Flex className="group-item" justify="around" key={item.id}>
                <div className="desc">
                  <p className="title">{item.title}</p>
                  <span className="info">{item.desc}</span>
                </div>
                <img src={`${BASE_URL}${item.imgSrc}`} alt="" />
              </Flex>
            )}
          />
        </div>

        {/* 最新资讯 */}
        <div className="news">
          <h3 className="group-title">最新资讯</h3>
          {/* WingBlank两边留白组件，size="md" */}
          <WingBlank size="md">{this.renderNews()}</WingBlank>
        </div>
      </div>
    )
  }
}
